<template>
  <work-template @submitOn="submitOn" v-model="ruleForm"
                 v-loading="loading"
                 :flowId="flowId"
                 @closeSelectedTag="closeSelectedTag" :butShow="bool">
    <div slot="form" class="container-div">
      <new-application-info v-model="ruleForm" state="readonly"/>
      <undo-disposal v-model="ruleForm" :state="state" ref="refUndoDisposal"/>
    </div>

  </work-template>
</template>

<script>
import * as apis from '@/api/vehicleDisposal/routineApplyFor.js'
import {revocationDisposalId} from "@/api/vehicleDisposal/routineApplyFor.js";

export default {
  name: 'RoutineApplyForCancel',
  components: {
    newApplicationInfo: () => import('../../components/routineDisposal/routineApplyFor/newApplicationInfo.vue'),
    undoDisposal: () => import('../../components/routineDisposal/routineApplyFor/undoDisposal.vue')
  },
  computed: {
    state() {
      if (this.$route.query.type === "edit") {
        return "write";
      }
      if (this.$route.query.type === "view") {
        return "readonly";
      }
    },
    status() {
      if (this.$route.query.status) {
        return 21
      } else {
        return 24
      }
    },
    bool() {
      if (this.$route.query.type === "edit") {
        return true;
      }
      if (this.$route.query.type === "view") {
        return false;
      }
    },
    flowId() {
      return this.$route.query?.flowId
    }
  },
  watch: {},
  data() {
    return {
      loading: false,
      ruleForm: {
        specification: ''
      }
    };
  },
  created() {
    this.handleDetail()
  },
  mounted() {
  },
  methods: {
    async handleDetail() {
      this.loading = true
      try {
        if (this.$route.query.id) {
          const res = await apis.vehicleDisposalDetails(this.$route.query.id)
          for (let key in res.data) {
            this.$set(this.ruleForm, key, res.data[key])
          }
        }
        if (this.$route.query.revocationId && this.$route.query.revocationId != -1) {
          this.ruleForm = (await apis.revocationDisposalId(this.$route.query.revocationId)).data
        }
        this.ruleForm.revocationDisposalId = this.$route.query.revocationId
      } catch (e) {
        console.error(e)
      } finally {
        this.loading = false
      }
    },

    submitOn() {
      this.$refs.refUndoDisposal.handleEffect().then(() => {
        const loading = this.$loading({
          lock: true,
          text: '保存中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        apis.revocationDisposalLog(this.ruleForm).then(res => {
          this.$message.success('保存成功')
          loading.close()
          this.closeSelectedTag()
        }).catch(() => {
          loading.close()
        })
      }).catch(() => {
      })
    },
    closeSelectedTag(view) {
      let obj = {}
      if (this.$route.query.path === 'RoutineApplyForList') {
        obj.path = '/VehicleDisposal/RoutineDisposal/RoutineApplyForList'
      }
      if (this.$route.query.path === 'RoutineHandleDetails') {
        obj.path = '/VehicleDisposal/RoutineDisposal/RoutineHandleDetails'
        obj.query = {
          type: "view",
          path: 'RoutineHandleList',
          id: this.$route.query.vehicleDisposalId
        }
      }

      this.$tab.closePage(view).then(({visitedViews}) => {
        this.$router.push(obj);
      });
    }
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/cwgd/container.scss";
</style>


